﻿@model  Faurecia.WM.Web.Models.SimulateModel
<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <span id="module">佛吉亚管理</span>
            <i class="fa fa-angle-right"></i>
        </li>
        <li>
            <span id="action"></span>
        </li>
    </ul>
</div>
<!-- END PAGE BAR -->
<div class="mt-bootstrap-tables" style="margin-top:20px">
    <div class="row">
        <div class="col-md-12">
            <div class="portlet light bordered">

                <div class="portlet-body form">
                    <!-- BEGIN FORM-->
                    <form id="defaultForm" class="form-horizontal" method="post" novalidate="novalidate">
                        <div class="form-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label col-md-3">
                                            区域：
                                        </label>
                                        <div class="col-md-9">
                                            <div class="input-icon right">
                                                <i class="fa"></i>
                                                <select id="AreaKey" name="AreaKey" class="form-control" required>
                                                    @if (ViewBag.AreaList != null && ViewBag.AreaList.Count > 0)
                                                    {
                                                        foreach (var item in ViewBag.AreaList)
                                                        {
                                                            <option value="@item.Key" areaId="@item.Id" productTypeId="@item.ProductTypeId">@item.Name</option>
                                                        }
                                                    }
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label col-md-3">
                                            机位：
                                        </label>
                                        <div class="col-md-9">
                                            <div class="input-icon right">
                                                <i class="fa"></i>
                                                <select id="MachineKey" name="MachineKey" class="form-control" required></select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label col-md-3">
                                            操作：
                                        </label>
                                        <div class="col-md-9">
                                            <div class="input-icon right">
                                                <i class="fa"></i>
                                                <select id="Type" name="Type" class="form-control" required>
                                                    <option value="1">入库</option>
                                                    <option value="2">出库</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="CarKey" class="control-label col-md-3">
                                            产品：
                                        </label>
                                        <div class="col-md-9">
                                            <div class="input-icon right">
                                                <i class="fa"></i>
                                                <select id="ProductKey" name="ProductKey" class="form-control" required>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                      

                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label class="control-label col-md-3">
                                            <span class="required" aria-required="true">*</span>
                                            推车：
                                        </label>
                                        <div class="col-md-9">
                                            <button type="button" class="btn green btnCarAdd">添加</button>
                                            <br />
                                            <table style="width:100%">
                                                <tr>
                                                    <td style="width:50%;height:45px;">推车</td>
                                                    <td style="width:50%;height:45px;">产品数量</td>
                                                </tr>
                                            </table>
                                            <table style="width:100%">
                                                <thead id="dateItem" class="dateItem">
                                                    <tr>
                                                        <td style="width:50%;height:45px;">
                                                            <select id="CarKey" name="CarKey" class="bs-select form-control" data-live-search="true" data-size="8" required style="width:90%;">
                                                                @if (ViewBag.CarList != null && ViewBag.CarList.Count > 0)
                                                                {
                                                                    foreach (var item in ViewBag.CarList)
                                                                    {
                                                                        <option value="@item.Key" productId="@item.ProductId" productCount="@item.ProductCount" areaId="@item.AreaId">@item.Number</option>
                                                                    }
                                                                }
                                                            </select>
                                                        </td>
                                                        <td style="width:50%;height:45px;">
                                                            <input type="text" id="ProductCount" name="ProductCount" class="form-control" maxlength="7" autocomplete="off" onkeyup="inputInt(this)" required style="width:90%;" />
                                                        </td>
                                                    </tr>
                                                </thead>
                                                <tbody id="divListCar"></tbody>
                                            </table>

                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6 ProductCountDiv">
                                    <div class="form-group">
                                        <label class="control-label col-md-3">
                                            
                                        </label>
                                        <div class="col-md-9">
                                            

</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-actions">
                            <div class="row">
                                <div class="col-md-offset-3 col-md-9">
                                    <button type="submit" class="btn green">保存</button>

                                    <button type="reset" class="btn">重置</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!-- END FORM-->
                </div>
            </div>
        </div>
    </div>
</div>
@section scripts{
    <script type="text/javascript">
        var page = function() {

            var handle1 = function() {
                var machineList = @Html.Raw(ViewBag.MachineListJson);
                var productList = @Html.Raw(ViewBag.ProductListJson);
                var carList = @Html.Raw(ViewBag.CarListJson);

                var init = function() {

                    var selectItem = $('#AreaKey option:selected');
                    var areaId = selectItem.attr('areaId');
                    var productTypeId = selectItem.attr('productTypeId');
                    var type = $('#Type').val();

                    $('#MachineKey').empty();
                    $.each(machineList, function(index, data) {
                        if (data.AreaId == areaId)
                            $('#MachineKey').append('<option value="' + data.Key + '">' + data.Number + '</option>');
                    });

                    $('#ProductKey').empty();
                    $.each(productList, function(index, data) {
                        if (data.ProductTypeId == productTypeId)
                            $('#ProductKey').append('<option value="' + data.Key + '">' + data.Name + '</option>');
                    });

                    $('#CarKey,ul.dropdown-menu').empty();
                    $.each(carList, function(index, data) {

                        if (type == 1 && data.Status == 1) { //模拟入库时，只显示已出库数据
                            return;
                        } else if (type == 2 && data.Status == 2) { //模拟出库时，是显示已入库数据
                            return;
                        }
                        if (data.AreaId == areaId) {
                            $('#CarKey').append('<option value="' + data.Key + '" productCount="' + data.ProductCount + '">' + data.Number + '</option>');
                        }


                    });
                };

                var productCount = $('#ProductCount');
                $('#Type').change(function() {
                    var value = $(this).val();

                    if (value == 2) {
                        productCount.val($('#CarKey option:selected').attr('productcount'));
                    }
                    init();
                });

                $('#CarKey').change(function() {
                    var value = $('#CarKey option:selected').attr('productcount');
                    productCount.val(value);
                });


                $('#AreaKey').change(init);

                var updateCar = function(item) {
                    for (var i = 0; i < carList.length; i++) {
                        var data = carList[i];
                        if (data.Key != item.CarKey) continue;

                        if (item.Type == 1) { //入库
                            data.Status = 1;
                            data.ProductCount = item.ProductCount;

                        } else { //出库
                            data.Status = 2;
                            data.ProductCount = 0;
                        }
                        carList[i] = data;

                        break;
                    }

                    init();
                };

                customFormValidate($('#defaultForm'), {}, function(form) {
                    var data = $(form).serializeObject();
                    $.ajax({
                        type: 'POST',
                        url: '@Url.Action("SaveOp")',
                        data: data,
                        async: false,
                        success: function(reslut) {
                            if (reslut.Success) {
                                updateCar(data);
                                showToast(0, '系统提示', '保存成功');
                                window.location.replace("/ProductWarehouse/op");
                            } else {
                                showToast(3, '系统提示', reslut.Message);
                            }
                        },
                        error: function(error) {
                            showToast(3, '系统提示', ' 操作失败!');
                        }
                    });
                });

                init();
            };

            return{
                init: function() {
                    handle1();
                }
            };
        }();
        
        $(document).ready(function() {
           
            page.init();
           
        });

        $(".btnCarAdd").click(function(){
            var CarProductCount=40;
            var areatext= $("#AreaKey").find("option:selected").text();
            if(areatext.indexOf("焊接")>-1)
                CarProductCount=12;
            else if(areatext.indexOf("真空")>-1)
                CarProductCount=40;
            else
                CarProductCount=40;

            var strHtml = $('#dateItem').html()
            .replace(/__ProductCount__/ig,CarProductCount);
            $(strHtml).appendTo($("#divListCar"));
            var array=$("[name='ProductCount']");//单引号 的name替换为相应的name
            for(var i=0;i<array.length;i++){
                if($(array[i]).val()=="")
                {
                    $(array[i]).val(CarProductCount);
                }
                //对value进行操作就OK了
            }
        });
    </script>
}
